<template>
	<view class="user">
		<view class="user_header">
			<view class="user_logo">
				<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
				<image v-else src="../../static/user_logo.png" mode=""></image>
				<view class="user_level">
					<i class="icon icon_level"></i>LV{{ userInfo.userLevel || 0 }}
				</view>
			</view>
			<view class="user_name" v-if="userInfo.nickname">
				<view @click="showUser = true" style="display: flex;align-items: center;">
					{{ userInfo.nickname || null }}<i class="icon icon_edit"></i>
				</view>
			</view>
			<view class="subscribe" @click="gotoOtherMiniProgram" v-if="config.PARAM13 && config.PARAM14">{{ config.PARAM13 }}</view>
			<view class="rule_desc" @click="showExplain = true">规则说明</view>
		</view>
		
		<view class="user_recharge" @click="goHref('integrate')">
			<view class="recharge_content">
				<view class="content1">
					每日签到，领取奖励
				</view>
				<view class="content2">
					剩余<i>{{ userInfo.availableGoldCoinCount || 0 }}</i>枚金币可用
				</view>
			</view>
			<view class="recharge_btn">
				<button type="default" v-if="config.SW_INTEGRAL_TOPUP == '1'" class="clockBtn" @click.stop="goHref('recharge')">去充值</button>
			</view>
		</view>
		
		<u-cell-group>
			<u-cell-item @click="goHref('firends')" title="邀请好友，金币不断" :title-style="{ fontSize: 32 + 'rpx', color: '#333', fontWeight: 500 }" :label-style="{ marginTop: 0 }" :arrow="true" arrow-direction="right">
				<image slot="icon" src="../../static/user/icon_coins.png" class="oImg" mode=""></image>
				<view class="tips" slot="label">
					每邀请成功一位好友，奖励6枚金币
				</view>
			</u-cell-item>
			<u-cell-item @click="goHref('space')" title="泡泡空间，我来守护" :title-style="{ fontSize: 32 + 'rpx', color: '#333', fontWeight: 500 }" :label-style="{ marginTop: 0 }" :arrow="true" arrow-direction="right">
				<image slot="icon" src="../../static/user/icon_space.png" class="oImg" mode=""></image>
				<view class="tips" slot="label">
					每个泡泡空间都有生命，需要细心呵护
				</view>
			</u-cell-item>
			<u-cell-item @click="goHref('message')" title="订阅消息，获取通知" :title-style="{ fontSize: 32 + 'rpx', color: '#333', fontWeight: 500 }" :label-style="{ marginTop: 0 }" :arrow="true" arrow-direction="right">
				<image slot="icon" src="../../static/user/icon_message.png" class="oImg" mode=""></image>
				<view class="tips" slot="label">
					关注公众号，留言、活力值消息提醒
				</view>
			</u-cell-item>
		</u-cell-group>
		<u-popup v-model="showExplain" mode="center" closeable width="640rpx" height="988rpx" border-radius="16" close-icon-size="40">
		    <rule-model @close="showExplain = false"></rule-model>
		</u-popup>
		<u-modal
		    class="delete-container"
		    v-model="showLogin"
			title="登录提示"
		    content="请确认是否授权登录账号？"
		    confirm-text="立即登录"
			confirm-color="#FED034"
		    cancel-text="暂不登录"
		    :show-cancel-button="true"
		    @confirm="login"
		    @cancel="showLogin = false"
		></u-modal>
		<u-popup v-model="showUser" mode="center" closeable width="640rpx" border-radius="16" close-icon-size="40">
		    <edit-user-info v-if="showUser" :avatar="userInfo.avatar" :nickname="userInfo.nickname" @getReUserInfo="getReUserInfo" @close="showUser = false"></edit-user-info>
		</u-popup>
	</view>
</template>

<script>
import ruleModel from './modal/rule.vue'
import EditUserInfo from './modal/editUserInfo.vue'
import { mapState } from 'vuex'
import storage from '@/common/js/storage';
import UserLogin from '@/common/js/login'
export default {
	components: {
		ruleModel,
		EditUserInfo
	},
	mixins: [UserLogin],
	data() {
		return {
			showExplain: false,
			showLogin: false,
			showUser: false,
		};
	},
	onShow() {
		this.initCurrentUser()
	},
	computed: {
		...mapState(['userInfo', 'isLoginStatus', 'config'])
	},
	methods: {
		login() {
		    this.getUserInfo(() => {
				this.isLogin = true
		        this.$u.toast('登录成功');
		    })
		},
		initCurrentUser() {
		    let currentUser = storage.get('userInfo');
			if(currentUser) {
				this.$store.commit('setUserInfo', currentUser)
				this.getReUserInfo()
			}
		},
		gotoOtherMiniProgram() {
			// 打开某个小程序
			if(this.config.PARAM14) {
				uni.navigateToMiniProgram({ appId: this.config.PARAM14 });
			}
		},
		goHref(type) {
			if(!this.isLoginStatus) {
				this.showLogin = true
				return
			}
			if(type == 'integrate') {
				// 去充值
				this.$u.route('/pages/integrate/integrate')
			} else if(type == 'recharge') {
				// 去充值
				this.$u.route('/pages/integrate/integrateCoin')
			} else if(type == 'firends') {
				// 邀请好友
				this.$u.route('/pages/inviteFriends/inviteFriends')
			} else if(type == 'space') {
				// 我的空间
				this.$u.route('/pages/mySpace/mySpace')
			} else if(type == 'message') {
				// 订阅消息
				this.$u.route('/pages/subMessage/subMessage')
			}
		}
	}
}
</script>

<style lang="less">
@import url("../../common/css/var.less");
page {
	background-color: #FFFFFF;
}
.icon {
	width: 32rpx;
	height: 32rpx;
	display: inline-block;
}
.icon_level {
	background: url(../../static/user/icon_level_white.png) no-repeat center;
	background-size: contain;
	margin-right: 8rpx;
}
.icon_edit {
	width: 40rpx;
	height: 40rpx;
	background: url(../../static/user/icon_edit.png) no-repeat center;
	background-size: contain;
	margin-left: 16rpx;
}
.user_header {
	position: relative;
	width: 100%;
	height: 400rpx;
	background: url(../../static/user/user_bg.png) no-repeat center;
	background-size: contain;
	.subscribe, .rule_desc {
		position: absolute;
		top: 50%;
		margin-top: -32rpx;
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		text-align: center;
	}
	.subscribe {
		left: 0;
		background-color: @blueColor;
		border-top-right-radius: 64rpx;
		border-bottom-right-radius: 64rpx;
		color: #FFFFFF;
	}
	.rule_desc {
		right: 0;
		background-color: #F1EAFF;
		color: @blueColor;
		border-top-left-radius: 64rpx;
		border-bottom-left-radius: 64rpx;
	}
	.user_logo {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		position: relative;
		padding-top: 124rpx;
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
		.user_level {
			position: absolute;
			bottom: -20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8rpx 16rpx;
			background-color: @blueColor;
			border-radius: 24rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
	.user_name {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 36rpx;
		color: #101D34;
		font-size: 40rpx;
	}
}

.clockBtn {
	width: 148rpx;
	height: 64rpx;
	line-height: 64rpx;
	border-radius: 36rpx;
	background-color: @orangeColor !important;
	color: #FFFFFF !important;
	font-size: 28rpx;
}
.user_recharge {
	margin: 32rpx 32rpx 80rpx;
	background: #FFEFBD;
	border-radius: 32rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.recharge_content {
		color: @orangeColor;
		.content1 {
			color: 32rpx;
			line-height: 48rpx;
		}
		.content2 {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			i {
				padding: 0 8rpx;
				font-size: 36rpx;
			}
		}
	}
}
.oImg {
	width: 88rpx;
	height: 88rpx;
	margin-right: 24rpx;
}
.tips {
	font-size: 24rpx;
	color: @tText;
}
</style>
